<template>
  <div v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <treeTools :all-data="rootData" :is-root="isRoot" @addDepartment="addDepartment" />
        <hr>
        <el-tree :data="depts" :props="defaultProps" default-expand-all>
          <treeTools slot-scope="{ data }" :all-data="data" @delDepartment="delDepartment" @addDepartment="addDepartment" @editDepartment="editDepartment" />
        </el-tree>
        <addDept ref="popFrom" :is-show.sync="isShow" :item-data="itemData" @addDept="addDept" />
      </el-card>
    </div>
  </div>
</template>

<script>
import treeTools from './components/tree-tools'
import addDept from './components/addDepartment'
import { tranListToTreeData } from '@/utils/index'
// axios请求
import { getDepartmentData } from '@/api/department'
export default {
  components: {
    treeTools,
    addDept
  },
  data() {
    return {
      loading: false,
      isRoot: true,
      isShow: false,
      rootData: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      depts: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      itemData: {}
    }
  },
  created() {
    this.getDepartment()
  },
  methods: {
    delDepartment() {
      this.getDepartment()
    },
    // 添加部门
    addDept() {
      this.getDepartment()
    },
    addDepartment(allData) {
      this.isShow = true
      this.itemData = allData
    },
    async editDepartment(allData) {
      await this.$refs.popFrom.editDepartment(allData.id)
      this.itemData = allData
      this.isShow = true
    },
    async getDepartment() {
      this.loading = true
      const res = await getDepartmentData()
      this.depts = tranListToTreeData(res.depts, '')
      this.loading = false
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
